<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="root"></div>
  <script>
    new Vue({
      el: '#root',
      data: {
        msg: 'abc'
      },
      mounted () {
        setTimeout(() => {
          // 更新data数据 => render
          this.msg += '--'
        }, 1000);
      },
      // 内部解析模块生成render函数, 后面就可以调用render得到虚拟DOM(初始化执行一次 + 每次更新都执行)
      // template: '<p title="aaa">{{msg}}</p>'

      /* 
      render函数:
        接收的参数: 内部定义好的用来创建虚拟DOM/Node的函数
        返回值: 虚拟DOM/Node, 用来生成真实DOM显示界面 / 与旧的虚拟DOM进行diff比较, 实现最小化DOM更新
      调用时机:
        初始化: 调用render, 得到虚拟DOM => 生成真实DOM, 替换el元素显示
        更新数据: 调用render, 得到新的虚拟DOM =>  与旧的虚拟DOM进行diff比较, 实现最小化DOM更新
      */
      render (createElement) {
        console.log('render()')
        const vnode = createElement('p', {attrs: {title: 'bbb'}}, this.msg)
        return vnode
      }
    })
  </script>
</body>
</html>